<template>
  <div id="index" class = "analyze">
    <el-row>
      <!--左侧部分 -->
      <el-col :span="7" id = "left" style="left: 0px;">
        <el-row>
          <el-col :span="24">
            <div class = "chart_right chart_main" style="border-bottom: 1vh transparent solid; margin-left: 0;">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">停车位结构</div>
                </el-col>
              </el-row>
              <div id = "chart1" class = "chart"></div>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main" style="border-bottom: 1vh transparent solid; margin-left: 0;">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">剩余停车位变动趋势</div>
                </el-col>
              </el-row>
              <div id = "chart2" v-popover:ana_chart2 class = "chart"></div>
              <el-popover
                ref="ana_chart2"
                placement="right"
                trigger="click">
                <el-table
                  :data="pa_tab"
                  id = "ana_tab"
                  height="96%"
                  style="max-height: 60vh">
                  <el-table-column
                    prop="time"
                    align="center"
                    label="时间段"
                    :width="t_w1">
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场1">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.31)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场2">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.88)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场3">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.43)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场4">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.12)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场5">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.32)}}</div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="num"
                    align="center"
                    label="停车场6">
                    <template slot-scope="scope">
                      <div>{{Math.ceil(scope.row.num*0.78)}}</div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-popover>
            </div>
          </el-col>
          <el-col :span="24">
            <div class = "chart_right chart_main" style="border-bottom: 1vh transparent solid; margin-left: 0;">
              <el-row>
                <el-col :span="1" style="width: 1.2vw">
                  <div class = "block"></div>
                </el-col>
                <el-col :span="22">
                  <div class = "title">剩余停车位预测</div>
                </el-col>
              </el-row>
              <div id = "chart3" class = "chart"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <!--地图部分 -->
      <el-col :span="17">
        <el-row>
          <el-col :span="24">
            <div class = "chart_center chart_main" style="height: 91vh;">
              <!--中间部分 -->
              <div class = "chart_center " style="position: absolute;top: 10vh;z-index: 100;height:7vh;width:26vw;">
                <el-row>
                  <el-col :span="24"  id = "legendBox_legend" style="margin-left: 13%">
                    <div class = "legendBox">
                      <p  v-popover:popover1 style="background-color: #02ff00"></p>
                      <p style="color: #02ff00">&nbsp;大于600</p>
                      <el-popover
                        ref="popover1"
                        placement="right"
                        trigger="hover"
                        content="大于600">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover2 style="background-color: #b2ff00"></p>
                      <el-popover
                        ref="popover2"
                        placement="right"
                        trigger="hover"
                        content="500 - 600">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover3 style="background-color: #00fcff"></p>
                      <el-popover
                        ref="popover3"
                        placement="right"
                        trigger="hover"
                        content="400 - 500">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover4 style="background-color: #fff700"></p>
                      <el-popover
                        ref="popover4"
                        placement="right"
                        trigger="hover"
                        content="300 - 400">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover5 style="background-color: #ffb200"></p>
                      <el-popover
                        ref="popover5"
                        placement="right"
                        trigger="hover"
                        content="200 - 300">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover6 style="background-color: #ff6600"></p>
                      <el-popover
                        ref="popover6"
                        placement="right"
                        trigger="hover"
                        content="100 - 200">
                      </el-popover>
                    </div>
                    <div class = "legendBox">
                      <p  v-popover:popover7 style="background-color: #ff1100"></p>
                      <p style="color: #ff1100">&nbsp;小于100</p>
                      <el-popover
                        ref="popover7"
                        placement="right"
                        trigger="hover"
                        content="小于100">
                      </el-popover>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div id="allmap" ref="allmap"></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { TMap } from '../TMap';
  import jq from 'jquery';
  import axios from 'axios';
  import {parks,venue} from '../../static/js/map/parking.js';
  import {config,xAxis,yAxis,grid,tooltip1,legend} from '../../static/js/config/chartConfig.js';
  var echarts = require('echarts');
  var tab = [{"time":'7:00-8:00',"num":500},{"time":'8:00-9:00',"num":488},{"time":'9:00-10:00',"num":455},{"time":'10:00-11:00',"num":432}
    ,{"time":'11:00-12:00',"num":399},{"time":'12:00-13:00',"num":367},{"time":'13:00-14:00',"num":366},{"time":'14:00-15:00',"num":355},{"time":'15:00-16:00',"num":300}
    ,{"time":'16:00-17:00',"num":456},{"time":'17:00-18:00',"num":500},{"time":'18:00-19:00',"num":555}];
  export default {
    name:"index",
    components: {

    },
    data(){
      return{
        t_w1:'500px',
        t_w2:'500px',
        pa_tab:tab,
        animate:false,
        analyzeList:[{
            ranking: '1',
            siteNmae: '停车场1',
            num: '200'
          }, {
            ranking: '2',
            siteNmae: '停车场2',
            num: '280'
          }, {
            ranking: '3',
            siteNmae: '停车场3',
            num: '300'
          }, {
            ranking: '4',
            siteNmae: '停车场4',
            num: '450'
          }, {
            ranking: '5',
            siteNmae: '停车场5',
            num: '330'
          }, {
            ranking: '6',
            siteNmae: '停车场6',
            num: '386'
          }, {
            ranking: '7',
            siteNmae: '停车场7',
            num: '320'
          }, {
            ranking: '8',
            siteNmae: '停车场8',
            num: '220'
          }, {
            ranking: '9',
            siteNmae: '停车场9',
            num: '285'
          }, {
            ranking: '10',
            siteNmae: '停车场10',
            num: '310'
          }, {
            ranking: '11',
            siteNmae: '停车场11',
            num: '265'
          }, {
            ranking: '12',
            siteNmae: '停车场12',
            num: '180'
          }, {
            ranking: '13',
            siteNmae: '停车场13',
            num: '270'
          }, {
            ranking: '14',
            siteNmae: '停车场14',
            num: '360'
          }, {
            ranking: '15',
            siteNmae: '停车场15',
            num: '360'
          }]
      }
    },
    mounted () {
      this.t_w1 =config().fontSize*10+'px'
      this.t_w2 =config().fontSize*8+'px'
      this.map();
      this.chart1();
      this.chart2();
      this.chart3();
    },
    methods: {
      map(){
        var p = parks();
        var point  = {'max':8,'min':0,'data':[
            {"lat":29.721545,"lng":106.543758,"value":1000},
            {"lat":29.717389,"lng":106.539831,"value":1500},
            {"lat":29.714967,"lng":106.535861,"value":889},
            {"lat":29.714296,"lng":106.536419,"value":768},
            {"lat":29.714669,"lng":106.537578,"value":235},
            {"lat":29.712451,"lng":106.537664,"value":349},
            {"lat":29.713476,"lng":106.539617,"value":769},
            {"lat":29.714165,"lng":106.539016,"value":412}
          ]};
        TMap('KLUBZ-D3F2X-G3Z4G-Z3HIY-YVT62-TGBMI').then(qq => {
          var map = new qq.maps.Map(document.getElementById("allmap"), {
            // 地图的中心地理坐标。
            center: new qq.maps.LatLng(29.717986,106.543071),
            zoom: 15,
            mapStyleId: 'style1',
            disableDefaultUI: true,    //禁止所有控件
          });
          //停车场轮廓
          var c = [593,456,312,623,321,78,113,211,667,70,90,311,555,333,263,124,34]
          var color = ['#02ff00','#b2ff00','#00fcff','#f7ff00','#ffb200','#ff6600','#ff1100'];
          for(var i = 0;i < p.length; i++) {
            (function(v){
                var path = []
                var cl = color[2]
                if(c[v]>=600){
                  cl = color[0]
                }else if(c[v]>=500 &&c[v]< 600){
                  cl = color[1]
                }else if(c[v]>=400 &&c[v]< 500){
                  cl = color[2]
                }else if(c[v]>=300 &&c[v]< 400){
                  cl = color[3]
                }else if(c[v]>=200 &&c[v]< 300){
                  cl = color[4]
                }else if(c[v]>=100 &&c[v]< 200){
                  cl = color[5]
                }else {
                  cl = color[6]
                }
                  for (var j = 0; j < p[v].path.length; j++) {
                    path.push(new qq.maps.LatLng(p[v].path[j][0],p[v].path[j][1]))
                  }
                var polygon = new qq.maps.Polygon({
                  map: map,
                  path: path,
                  strokeWeight: 0,
                  zIndex: 1000,
                  strokeColor: new qq.maps.Color(0, 0, 0, 0.8),
                  fillColor: qq.maps.Color.fromHex(cl, 0.8)
                });
              var center = new qq.maps.LatLng(p[v].center[0],p[v].center[1]);
                var label = new qq.maps.Label({
                  position: center,
                  map: map,
                  content: '<div class = "tit">'+p[v].name+'</div>'
                });
              var infoWin = new qq.maps.InfoWindow({
                map: map
              });
              qq.maps.event.addListener(polygon, 'click', function() {
                infoWin.open();
                infoWin.setContent('<div class = "mk" style="text-align:center;white-space:'+
                  'nowrap;margin:10px;color: #000fff;">' +
                  p[v].name + ' 停车场<br/>剩余车位：'+c[v]+' 个</div>');
                infoWin.setPosition(center);
              });
            })(i);
          }

          qq.maps.event.addListener(map,'zoom_changed',function() {
            var zoomLevel = map.getZoom();
            var si = {"f15":1.5,"f16":1.8,"f17":2.3,"f18":3.8}
            if(zoomLevel>14){
              jq('.tit').css('display','block')
            }else{
              jq('.tit').css('display','none')
            }
          });
          //国博馆轮廓
          for (var n = 0; n < venue().length; n++) {
            var ph = []
            for (var k = 0; k < venue()[n].path.length; k++) {
              ph.push(new qq.maps.LatLng(venue()[n].path[k][0], venue()[n].path[k][1]))
            }
            var cl1 = '#a2a6a7'
            var c1 = 0.4
            var bw = 0
            if(n == 0){
              c1 = 0.001
              bw = 2
            }
            if(n > 2){
              c1 = 0.8
              bw = 0
              cl1 = '#1281D5'
            }
            var polygon2 = new qq.maps.Polygon({
              map: map,
              path: ph,
              strokeWeight: bw,
              strokeDashStyle: 'dash',
              strokeColor: '#a2ecfb',
              fillColor: qq.maps.Color.fromHex(cl1, c1)
            });
          }
        });
        jq(function(){
          jq("#allmap").bind("DOMNodeInserted",function(e){
            var tempCount = 0;
            jq("#allmap .smnoprint").siblings().each(function(){
              tempCount++;
              if(tempCount==2||tempCount==3){
                jq(this).remove();
              }
            });
          });
        });

      },
      chart1(){
        var xData  = this.analyzeList;
        console.log(xData)
        var chartsBar_left = echarts.init(document.getElementById('chart1'));
        var xDataList=[]
        var data1 =[];
        for(var i=0;i<xData.length;i++){
          xDataList.push(xData[i].siteNmae)
          data1.push(xData[i].num)
        }
        var data1Max = Math.max.apply( Math, data1 );
        var data2 = [];
        for(var i = 0;i<data1.length;i++){
          data2.push(data1Max*1.2)
        }
        var option = {
          grid:  grid(),
          legend: {
            show: false
          },
          tooltip:{
            trigger: "axis",
            axisPointer: {
              type: "shadow",
              label: {
                show: false
              }
            },
            textStyle: {
              color: config().toolColor,
              fontSize:config().toolFontSize
            },
          },
          xAxis: xAxis(xDataList),
          yAxis:yAxis(),
          series: [{
            name:'剩余车位',
            type: 'bar',
            barWidth:'20%',
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#4ff8fc'
                }, {
                  offset: 1,
                  color: '#069cfd'
                }], false)
              }
            },
            z: -10,
            data: data1
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart2() {
        var xData = ['6:00','8:00','8:05','8:10','8:15','8:20','8:25','8:30','8:35','8:40','8:45','8:50','8:55','9:00','9:05','9:10','9:15','9:20','9:25','9:30','9:35','9:40','9:45','9:50','9:55','10:00','20:00'];
        var chartsBar_left = echarts.init(document.getElementById('chart2'));
        var option = {
          grid:  grid(),
          tooltip:  tooltip1(),
          xAxis: xAxis(xData),
          yAxis:yAxis(),
          series: [ {
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            data: ['','1789', '1787', '1787', '1790', '1795', '1805', '1820', '1841', '1870', '1907', '1953', '2009','2077','2157','2250','2358','2481','2620','2777','2952','3146','3361','3597','3855','4137',''],
            itemStyle: {
              normal: {
                color: '#fff'
              }
            },
            lineStyle: {
              normal: {
                color: '#fbce00',
                width: config().lineWidth
              }
            }
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
      chart3() {
        var xData = ['6:00','8:00','8:05','8:10','8:15','8:20','8:25','8:30','8:35','8:40','8:45','8:50','8:55','9:00','9:05','9:10','9:15','9:20','9:25','9:30','9:35','9:40','9:45','9:50','9:55','10:00','10:05','10:10'];
        var yData=['','1789', '1787', '1787', '1790', '1795', '1805', '1820', '1841', '1870', '1907', '1953', '2009','2077','2157','2250','2358','2481','2620','2777','2952','3146','3361','3597','3855','4137','4444','4776']
        var chartsBar_left = echarts.init(document.getElementById('chart3'));
        var option = {
          grid:  grid(),
          tooltip:  tooltip1(),
          xAxis: xAxis(xData),
          yAxis:yAxis(),
          series: [{
            name: '昨日',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            symbolSize: config().symbolSize,
            data: yData,
            lineStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(210,37,88,1)'
                }, {
                  offset: 1,
                  color: 'rgba(0,244,255,0.1)'
                }], false),
                width: config().lineWidth
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: 'rgba(210,37,88,1)'
                }, {
                  offset: 1,
                  color: 'rgba(0,244,255,0.1)'
                }], false)
              },
            },
          }, {
            type: 'bar',
            animation: false,
            barWidth: config().lineWidth*0.5,
            hoverAnimation: false,
            data: yData,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color:'rgba(119,251,174,0.3)',
                label: {
                  show: false
                }
              }
            },
            markArea:{
              data: [[{
                xAxis: '9:30'
              }, {
                xAxis: '10:10'
              }]]
            }
          }]
        };
        chartsBar_left.setOption(option)
        window.onresize = chartsBar_left.resize;
      },
  }
}
</script>
<style lang="scss" scoped>
  #index{
    width: 100%;
    height: 100vh;
    background: #081220;
    *{margin: 0;padding: 0;}
    #left{
      position: relative;
      top:7vh;
      background:  rgba(12,27,63,0.73);
    }
    .chart{
      height: 85.5%;
    }
    .chart_right{
      height: 28.7vh;
    }
    #allmap{
      height: 91.8vh;
      top: 7vh;
      overflow: hidden;
    }

    .legendBox{
      display: flex;
      align-items: center;
      font-size: 0.7vw;
      color: #AFB8D2;
      margin-top: 0.1vh;
      width: 25%;
      p:nth-child(1){
        width: 1.2vw;
        height: 0.7vw;
      }
    }

    .leg1{
      p:nth-child(1){background: #4CE4E9;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #FF2661;}
    }
    .leg2{
      p:nth-child(1){background: #F32056;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){ color: #FBCE00;}
    }
    .leg3{
      p:nth-child(1){background: #E88216;}
      p:nth-child(2){margin: 0 0.5vw}
      p:nth-child(3){color: #0399FD;}
    }

    .analyze_list{
      height: 83vh;
      padding: 0 6% 10px;
      overflow: hidden;
      transition: all 0.5s;
    }
    .analyze_list ul li{
      height: 4.1vh;
      line-height: 4.1vh;
      color: #02a9ff;
      font-size: 2vh;
      background: #082c50;
      margin-top: 0.8vh;
      border-radius: 0.8vh;
    }
    .analyze_list ul li i{
      width: 7vh;
      display: inline-block;
      color: #fff;
      font-size: 2vh;
      font-style: normal;
      background: url("../../static/img/xl4.png") no-repeat;
      background-size: 2.4vh 2.4vh;
      background-position: 2.3vh 0.8vh;
      text-align: center;
    }
    .analyze_list ul li:nth-child(1) i{background-image: url("../../static/img/xl1.png");}
    .analyze_list ul li:nth-child(2) i{background-image: url("../../static/img/xl2.png");}
    .analyze_list ul li:nth-child(3) i{background-image: url("../../static/img/xl3.png");}
    .analyze_list ul li span.analyze_siteNmae{
      display: inline-block;
      width: 14vh;
      text-align: center;
      margin-left: 1vh;
      border-top: 0.1vh transparent solid;
      background-clip:padding-box,border-box;
      background-origin:padding-box,border-box;
      background-image:linear-gradient(to right,#082c50,#082c50),linear-gradient(to right,#185078,#4cc7fc,#dcf4ff,#4cc7fc,#185078);
    }
    .analyze_list ul li span.analyze_num{
      float: right;
      width:12vh;
      display: inline-block;
      text-align: center;
      color: #52fcfc;
      font-weight: bold;
    }
    .chart_main{
      margin-left: 0px!important;
    }
    .anim{
      transition: all 0.5s;
    }
  }

</style>
